<template>
  <el-dialog
    class="troila-dialog"
    :title="`${title}字典`"
    :visible.sync="dialogFormVisible"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="500px"
  >
    <el-form
      class="troila-form"
      :label-width="formLabelWidth"
      :model="form"
      :rules="rules"
      ref="form"
    >
      <el-form-item label="上级字典" prop="pid">
        <!--  <el-input v-model="form.pid" auto-complete="off" placeholder="请输入内容"></el-input> -->
        <treebox
          style="width: 300px;"
          id="treebox"
          :list="treeArr"
          v-model="form.pid"
          placeholder="请选择"
          input
          :disabled="disabled"
          :clear="!disabled"
          onlyone
          :option="{ key: 'id', label: 'dictName' }"
          @return="treeChange"
        ></treebox>
      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-radio-group v-model="form.dictType">
          <el-radio
            :disabled="radioDisable"
            :label="item.dictCode"
            v-for="item in only ? dictType.slice(0, 1) : dictType"
            :key="item.dictCode"
            >{{ item.dictName }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="字典名称" prop="dictName">
        <el-input
          v-model="form.dictName"
          auto-complete="off"
          placeholder="请输入字典名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="字典值" prop="dictCode">
        <el-input
          v-model="form.dictCode"
          auto-complete="off"
          placeholder="请输入字典值"
        ></el-input>
      </el-form-item>
      <el-form-item label="显示顺序" prop="sort">
        <el-input
          v-model="form.sort"
          auto-complete="off"
          placeholder="请输入显示顺序"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input
          v-model="form.remarks"
          auto-complete="off"
          placeholder=""
          type="textarea"
          :rows="2"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">{{
        ajaxIng ? '关 闭' : '取 消'
      }}</el-button>
      <el-button type="primary" :loading="ajaxIng" @click="submitForm('form')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'dictForm',
  props: {
    value: {
      // true为新增，其他为编辑
      type: [Boolean, String, Number, Object],
      default: false,
    },
    treeArr: {
      type: Array,
    },
  },
  data() {
    return {
      dialogFormVisible: this.value ? true : false, //弹窗显示
      title: '',
      form: {
        pid: '',
        dictType: '',
        dictName: '',
        dictCode: '',
        sort: '',
        remarks: '',
      },
      formLabelWidth: '120px', //标题文字宽度
      disabled: false,
      radioDisable: false,
      rules: {
        // 规则
        dictType: [
          { required: true, message: '请选择字典类型', trigger: 'change' },
        ],
        dictName: [
          { required: true, message: '请输入字典名称', trigger: 'blur' },
        ],
        dictCode: [
          { required: true, message: '请输入字典值', trigger: 'blur' },
        ],
        sort: [{ required: true, message: '请输入显示顺序', trigger: 'blur' }],
      },
      dictionary: {},
      ajaxIng: false,
      only: false,
    }
  },
  computed: {
    dictType() {
      let list = this.$store.state.dictionary.dict_type
      if (!list) {
        this.$store.dispatch('dictionary/getDict', 'dict_type')
      }
      this.dictionary.dictType = list
      return list ? list : []
    },
  },
  watch: {
    value(v) {
      let show = v ? true : false
      this.dialogFormVisible !== show ? (this.dialogFormVisible = show) : null
      if (v) {
        this.title = v.method === 'add' ? '新增' : '修改'
        // console.log(v)
        this.$refs.form ? this.$refs.form.resetFields() : null
        if (typeof v === 'object') {
          for (let k in this.form) {
            typeof this.form[k] == 'string' || typeof this.form[k] == 'number'
              ? (this.form[k] = v[k] ? v[k] : '')
              : (this.form[k] = v[k] ? [v[k]] : [])
          }
        } else {
          for (let k in this.form) {
            typeof this.form[k] == 'string' || typeof this.form[k] == 'number'
              ? (this.form[k] = '')
              : (this.form[k] = [])
          }
        }
        if (this.form.pid == '') {
          this.only = true
        } else {
          this.only = false
        }

        if (v.type && v.type == 'add') {
          this.disabled = true
        } else {
          this.disabled = false
        }

        if (v.method == 'edit') {
          this.radioDisable = true
        } else {
          this.radioDisable = false
        }
        this.$nextTick(() => {
          this.$refs.form ? this.$refs.form.clearValidate() : null
        })
      }
    },
    dialogFormVisible(v) {
      v ? null : this.$emit('input', v)
    },
    treeArr(v) {
      this.toFilters(this.treeArr)
    },
  },
  methods: {
    toFilters(list) {
      return list.filter((item) => {
        // console.log(item)
        item.children && item.children.length > 0
          ? (item.children = this.toFilters(item.children))
          : null
        return item.dictKind != '3'
      })
    },
    treeChange(data) {
      // console.log(data)
      if (data) {
        this.only = false
      } else {
        this.only = true
      }
    },
    submitForm(formName) {
      // console.log(value)
      if (this.ajaxIng) {
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ajaxIng = true
          let param = { ...this.form }
          // console.log(param)
          if (this.value.method === 'edit') {
            param.id = this.value.id
            this.API.dictManage
              .updateDict(param)
              .then((res) => {
                if (res.code == '1') {
                  this.ajaxIng = false
                  this.$alertFn.success(`修改字典成功 ！`)
                  this.dialogFormVisible = false
                  this.$emit('formConfirm')
                } else {
                  this.ajaxIng = false
                }
              })
              .catch((error) => {
                this.ajaxIng = false
              })
          } else {
            this.API.dictManage
              .addDict(param)
              .then((res) => {
                if (res.code == '1') {
                  this.ajaxIng = false
                  this.$alertFn.success(`新增字典成功 ！`)
                  this.dialogFormVisible = false
                  this.$emit('formConfirm')
                } else {
                  this.ajaxIng = false
                }
              })
              .catch((error) => {
                this.ajaxIng = false
              })
          }
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>